<template>
  <div class="page luckdraw-sponsor">
    <div class="luckdraw-sponsor-container">
      <p class="intro">首页公共抽奖支持品牌宣传与奖品合作，由智盟汇科技发起，企业付费冠名，个人合作敬请期待！</p>
      <p class="intro">我们正在寻求优质的企业级合作伙伴，如有商务合作意向，请在下方留下信息，我们会仔细查看并尽快与您联络，期待与您共行！</p>
      <p class="intro color">请填写：您的称呼，联系方式，公司和期望推广的产品简介</p>
      <div class="text">
        <textarea placeholder="请填写" v-model="text"
          placeholder-style="color:#cacaca"></textarea>
      </div>
      <div class="btn">
        <m-button text="提交" @onClick="onSponsorSubmit"></m-button>
      </div>
      <div class="footer">感谢支持和信赖，我们将在2个工作日内与您联络</div>
    </div>
    <m-toast v-model="toastContent"></m-toast>
  </div>
</template>

<script>
import MButton from 'comp/m-button'
import MToast from 'comp/m-toast'
import mixins from 'comp/mixins'

export default {
  mixins: [mixins],
  components: {
    MButton,
    MToast
  },
  data () {
    return {
      text: '',
      toastContent: ''
    }
  },
  methods: {
    async onSponsorSubmit () {
      if (!this.text) {
        this.toastContent = '请填写您的信息'
        return false
      }
      const openId = await this.getOpenId()
      const ret = await this.$store.dispatch('createSponsor', {
        context: this.text,
        playerid: openId
      })
      if (ret) {
        wx.showToast({
          icon: 'success',
          title: '已提交',
          duration: 2000
        })
        setTimeout(() => {
          wx.navigateBack()
        }, 2000)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.luckdraw-sponsor {
  &-container {
    padding-top: 20rpx;
  }
  .intro {
    font-size: 28rpx;
    color: #777;
    padding: 20rpx 30rpx;
    line-height: 1.5;
    &.color {
      color: red;
    }
  }
  .text {
    padding: 30rpx 30rpx;
    background-color: #fff;
    textarea {
      width: 100%;
      font-size: 32rpx;
    }
  }
  .btn {
    padding: 50rpx 30rpx 0;
  }
  .footer {
    text-align: center;
    color: #777;
    font-size: 28rpx;
    padding: 30rpx 0;
  }
}
</style>

